<template>
    <u-col class="bg-white">
        <v-app-bar color="grey lighten-4" flat app>
            <v-btn icon @click="$goBack">
                <v-icon>arrow_back</v-icon>
            </v-btn>
            <v-toolbar-title>详情</v-toolbar-title>
            <v-spacer></v-spacer>
        </v-app-bar>
        <talk-item :talk="talk" showAllComment></talk-item>
        <!--<msg-input
                ref="msgInput"
                v-focus="inputContentFocus"
                :placeholder="msgInputPlaceholder"
                v-show="inputContentFocus"
                @send="sendComment"
        >
        </msg-input>-->
    </u-col>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch} from 'vue-property-decorator'
  import Talk from "@/model/Talk"
  import TalkAPI from "@/views/talk/TalkAPI"
  import {namespace} from "vuex-class"
  import TalkItem from "@/views/talk/item/TalkItem.vue"

  const talkModule = namespace('talk')

  @Component({
    components: {TalkItem}
  })
  export default class TalkDetail extends Vue {
    @Prop() readonly talkId: number
    @talkModule.State('talk') currentTalk: Talk
    @talkModule.State('comment') currentComment: Comment
    @talkModule.State('childComment') currentChildComment: Comment
    @talkModule.State('inputContentFocus') inputContentFocus: boolean
    @talkModule.State('currentContent') currentContent: string

    talk: Talk = null

    created() {
      TalkAPI.queryTalkDetail(this.talkId).then(res => {
        this.talk = res.data
        this.$store.commit('talk/setTalk', this.talk)
      })
    }

    get msgInputPlaceholder() {
      if (this.currentContent) {
        return '回复：' + this.currentContent
      } else {
        return ''
      }
    }

    sendComment(content) {
      this.$store.commit('talk/addComment', content)
    }
  }
</script>
<!--<template v-if="talk && talk.comments && talk.comments.length">
    <v-card flat v-for="comment in talk.comments">
        &lt;!&ndash;                评论用户信息&ndash;&gt;
        <v-list-item>
            <v-list-item-avatar size="40" class="mr-10px">
                <v-img :src="$imgUrl+comment.user.headImg"/>
            </v-list-item-avatar>
            <v-list-item-content>
                <v-list-item-title class="subtitle-1 font-weight-bold">
                    {{comment.user.nickname}}
                </v-list-item-title>
                <v-list-item-subtitle>{{talk.createTime | formatTime}}</v-list-item-subtitle>
            </v-list-item-content>
            &lt;!&ndash;<v-list-item-action>
                <v-btn text small @click.stop="$store.commit('talk/setTalk',talk)">
                    <v-icon color="grey lighten-1" left>favorite_border</v-icon>
                    &lt;!&ndash;                    favorite&ndash;&gt;
                    {{talk.comments.length}}
                </v-btn>
            </v-list-item-action>&ndash;&gt;
        </v-list-item>
        &lt;!&ndash;                评论内容&ndash;&gt;
        <v-card-text class="body-1 black&#45;&#45;text py-0" @click="setComment(talk,comment)">
            {{comment.content}}
            &lt;!&ndash;{{comment.no}}# &ndash;&gt;
            &lt;!&ndash;                    子评论&ndash;&gt;
            &lt;!&ndash;                    .filter((comment,index)=>index<showNum)&ndash;&gt;

            &lt;!&ndash;<v-card-actions v-show="comment.childComments.length>showNum">
                <v-btn flat small color="orange" class="caption" @click="showNum*=3">
                    显示更多
                    <v-icon>expand_more</v-icon>
                </v-btn>
            </v-card-actions>&ndash;&gt;
            &lt;!&ndash;<v-btn icon class="ma-0">
              <v-icon small>thumb_up</v-icon>
            </v-btn>&ndash;&gt;
        </v-card-text>

        &lt;!&ndash;            子评论块&ndash;&gt;
        <v-card-text v-if="comment.childComments" class="py-5px">
            <v-card class="bg-gray py-5px" flat tile>
                &lt;!&ndash;<v-list-item>
                    <v-list-item-content>
                        <v-list-item-title class="body-1">
                            {{childComment.user.nickname}}

                        </v-list-item-title>
                    </v-list-item-content>
                </v-list-item>&ndash;&gt;
                &lt;!&ndash;                            @click="$store.commit('setChildComment',{talk,comment,childComment})"&ndash;&gt;
                <v-card-text v-for="childComment in comment.childComments"
                             @click="setChildComment(talk,comment,childComment)"
                             class="px-10px py-3px black&#45;&#45;text body-2">
                    &lt;!&ndash;{{childComment.no}}#&ndash;&gt; <a>{{childComment.user.nickname}}：</a>
                    <span v-if="childComment.replyComment">回复 <a>{{childComment.replyComment.user.nickname}}：</a></span>{{childComment.content}}
                </v-card-text>
                <v-card-text v-if="comment.childComments.length>2" class="px-10px py-3px body-2">
                    查看{{comment.childComments.length}}条回复
                    <v-icon class="body-2">chevron_right</v-icon>
                </v-card-text>
            </v-card>
        </v-card-text>


        <v-card-text v-else class="py-5px body-2" @click="setComment(talk,comment)">
            回复
        </v-card-text>
        <v-divider class="mt-5px"></v-divider>
    </v-card>
</template>-->
